<template>
  <div class="dialog" :class="animation" v-if="visible">
    <div class="mask" :class="{'mask-transparent': pdata.transparent}" @tap="hiddenPop"></div>
    <div class="dialog-box">
      <div class="dialog-title relative">
        <div class="text-center">{{pdata.title || '请选择'}}</div>
        <p v-if="pdata.type === 'multi'" class="multi-text">最多只能选择{{pdata.multiCount}}项</p>
        <i v-if="pdata.type === 'multi'" class="multi dialog-close" @tap="hiddenPop">确定</i>
        <i v-else class="dialog-close" @tap="hiddenPop">×</i>
      </div>
      <div class="dialog-content text-center">
        <div v-if="pdata.type === 'multi'" class="weui-grids">
          <block v-for="(item, index) in range" :key="item.name">
            <div class="weui-grid">
              <div :class="{ 'time-box': true, active: item.checked}" hover-calss="active" @tap="selectMulti(index)">
                <div>{{item.name}}</div>
              </div>
            </div>
          </block>
        </div>
        <div v-else class="weui-grids">
          <block v-for="(item, index) in range" :key="index">
            <div class="weui-grid">
              <div class="time-box" :class="{ disabled: item.disabled, active: item.checked}" hover-calss="active" @tap="select(index)">
                <div>{{item.time}}小时</div>
                <div>{{item.money}}元</div>
              </div>
            </div>
          </block>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
/* props的data
  data: {
    transparent: 透明遮罩
    title: 标题
    content: 内容
  }
*/
export default {
  name: 'PopLayer',
  props: {
    pdata: Object,
    visible: Boolean,
    animation: String
  },
  data () {
    return {

    }
  },
  computed: {
    range () {
      return this.pdata.range
    }
  },
  methods: {
    hiddenPop () {
      this.$emit('update:visible', false)
    },
    select (index) {
      if (this.pdata.range[index].disabled) {
        return this.dialog.showToast('不能选择此时间，请更换日期后选择')
      }
      this.hiddenPop()
      this.$emit('change', index)
    },
    selectMulti (index) {
      let arr = []
      this.range.forEach((v, i) => {
        if (v.checked) { arr.push(i) }
      })
      if (arr.includes(index)) {
        arr = arr.filter(v => v !== index)
      } else if (arr.length < this.pdata.multiCount) { // 最多数量限制
        arr.push(index)
      }
      this.$emit('change', arr)
    }
  }
}
</script>

<style lang="less">

  .dialog-content {
    .weui-grids{
      padding: 0 18px 35px;
      .weui-grid {
        padding: 20px 5px 0;
        border: none;
        .time-box{
          color: #3186ff;
          font-size: 14px;
          line-height: 18px;
          padding: 12px 0;
          border: 1px solid;
          border-radius: 2px;
          &.active{
            background-color: #3186ff;
            color: #fff;
          }
          &.disabled{
            background-color: #f5f5f5!important;
            color: #999!important;
          }
        }
      }
    }
  }
  .dialog .dialog-box {
    .multi-text{
      font-size: 12px;
      color: #666;
      text-align: center;
      margin-top: 6px;
      margin-bottom: -10px;
    }
    .multi.dialog-close{
      font-size: 16px;
    }
  }
</style>
